<template>
    <div class="heh">
        <ChaView>
                <img  @click="per" src="../assets/left.png" alt="">
                <p class="he">影院</p>
        </ChaView><br><br>
        <div class="fj">
            <p class="ew">{{$route.query.name}}</p>
            <p><span>今天{{shi}}月{{jit}}日</span><span class="span">国语{{$route.query.RoomType}}</span></p>
        </div>
        <div class="yin">
            <div class="mu">银幕</div>
        <div class="zuow" >
         <ul>
            <!-- 座位 依靠循环数组来遍历100个 每个li都有一个id和状态 -->
                <li v-for="item,index in seatlist" :class="item.status" :key="index" @click="checked(item.id)">
                </li>
            </ul>
        </div>
        </div>
        <div class="qued">
            <ul>
                <li><p><img src="../assets/e_seat.png" alt="">&nbsp;可选</p> </li>
                <li><p><img src="../assets/sed_seat.png" alt="">&nbsp;已选</p></li>
                <li><p><img src="../assets/sell_seat.png" alt="">&nbsp;已售</p></li>
            </ul>
        </div>
        <div class="yixuan">
            <p>已选座位</p>
            <ul>
                <li v-for="item,index in checkedList" :key="index" @click="del(index)">
                <p>{{item.Row}}排{{item.Col}}座</p>
                <p>￥{{price}}</p>
                </li>
            </ul>
        </div>
        <router-link :to="{ path: '/din', query: {allPrice:allPrice} }">

            <div class="qdxz" @click="xz">
                <h4>确定选座</h4>
            </div>
        </router-link>
    <router-view/>
    </div>
</template>

<script>
import ChaView from '@/components/ChaView.vue';
export default {
    data() {
        return {
            shi: new Date().getMonth() + 1,
            jit: new Date().getDate(),
            seatlist: [],//所有座位li的数组
            checkedList:[],//最终选中的座位   要发送到后台的
            id: this.$route.query.id,
            price: this.$route.query.price.slice(0,5)
        };
    },
    created() {
        //初始化 所有座位li的数组
        for(var i=0;i<100;i++){
            //给每个li添加一个id值 独有的值
            this.seatlist[i]={id:i,status:''}
        }
    },
    methods: {
         per() {
        this.$router.go(-1)
        },
        xz() {
            if (this.checkedList.length != 0) {
                this.axios.post('/Orders', {
                    username: localStorage.getItem('username'),
                    tokenID:localStorage.getItem('tokenID'),
                    "TimeID":this.id,
                    "ticketArray": this.checkedList
                    
                }).then(res => {
                    console.log(res);
                    this.$message('下单成功')
                    this.$router.push('/din')
                })
            } else {
                this.$message('选择座位')
            }
        },
        checked(index) {
            //点击哪个li 让他添加到一个数组中
            if (this.checkedList.length >= 4) {
            //判断 让每个li最多显示四个
                return this.$message('最多选4个')
            } else {
                if (this.seatlist[index].status == "") {
                    this.seatlist[index].status = "active"
                    var row = Math.floor(index / 10) + 1//计算几排
                    var col = index % 10 + 1//计算几座
                    this.checkedList.push({Row:row,Col:col,Index:index})
                    console.log(this.checkedList)
                }
            }
        },
        del(index) {
            //根据你点的选中座对应数组的index  拿到 seatlist的索引值 改变 status 并且在checkedList删除
            let i = this.checkedList[index].Index
        console.log(i,index);
            this.seatlist[i].status = ''
        this.checkedList.splice(index,1)
        },
         getData(){
            //加载已经售卖过的座位  给他添加状态  红色
            this.axios.get(`/Movie/Seat?TimeID=${this.id}`,{
                headers: {"authorization": "basic "+localStorage.tokenID}
            }).then(res=>{
                console.log(res);
                //找到res中座位对应的 li的id  改变seatlist中的对应数据的状态
                for(var i=0;i<res.data.Movie.length;i++){
                    let index=(res.data.Movie[i].Row-1)*10 + res.data.Movie[i].Col-1
                    this.seatlist.push(index)
                    this.seatlist.pop()
                    //把数据做一个添加和删除的操作 达到 状态的改变
                    this.seatlist[index].status ="selled"
                }
            })
        }
    },
    mounted() {
        //获取seat座位数据
        this.getData()  
    },
    computed: {
         allPrice() {
            return this.price*this.checkedList.length  
        },
    },
    components: {
    ChaView
},
};
</script>

<style lang="scss" scoped>
.qdxz{
    width: 100vw;
    height: 6vh;
    background-color: #009CDC;
    h4{
        color: white;
        text-align: center;
        line-height: 6vh;
    }
}
.yixuan{
    background-color: #FFFFFF;
    width: 100vw;
    height: 10vh;
    p{
        font-size: 14px;
    }
    ul{
        width: 100vw;    
            margin: 0 auto;
        li{
            margin-top: 1vh;
            height: 5vh;
            width: 22vw;
            margin-left: 2.5vw;
            background: url(../assets/seat_item.png)no-repeat;
            background-size: 100% 100%;
            text-align: center;
            span{
                color: #FF9C15;
            }
        } 
    }
}
.qued{
    width: 100vw;
    background-color: #FFFFFF;
    height: 40px;
    border-bottom: 1px solid #ccc;
    ul{
        display: flex;
        li{
            flex: 1;
            font-size: 12px;
            text-align: center;
            p{
                img{
                    width: 20px;
                    height: 20px;
            }
            }
    }
}
}
li{
    list-style: none;
    float: left;
    img{
        width: 28px;
        height: 28px;
        margin-left: 12px;
        margin-top: 12px;
    }
}
.zuow{
    margin-top: 5%;
    width: 100vw;
    height: 42vh;
    ul{
        li{
            background: url(../assets/e_seat.png) no-repeat;
            width: 35px;
            height: 35px;
            background-size: 35px 35px;
            background-color: #f3f3f3;
            margin-left: 6px;
            margin-top: 5px;
            box-sizing: border-box;
            padding: .05rem;
        }
    }
}
        .zuow ul li.active{
    background: url(../assets/sed_seat.png) no-repeat;
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
}
.zuow ul li.selled{
    background: url(../assets/sell_seat.png) no-repeat;
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
}
.mu{
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
    color: #D8E7EF;
    width: 33vw;
    height: 3vh;
    background:url(../assets/screen.png)no-repeat;
    background-size: 100% 70%;
}
.yin{
    width: 100vw;
    height: 52vh;
}
.he{
    margin-top: -25px;
    font-size: 18px;
    font-weight: 500;
}
.span{
    display: inline-block;
    width: 49px;
    overflow: hidden;
    height: 13px;
    white-space: nowrap;
}
.heh{
    width: 100vw;
    height: 100vh;
    background-color: #F3F3F3;
}
.fj{
    width: 100vw;
    height: 6vh;
    background-color: #FFFFFF;
    .ew{
        padding-top: 2%;
        color: #076FA2;
        font-weight: 600;
        font-size: 14px;
    }
    p{
        color: #888888;
        text-indent: 9px;
        font-size: 12px;
    }
}
</style>
